<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>进度条</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				
			}
			ul{
				width: 480px;
				height: 30px;
				position: absolute;
			}
			li{
				width: 40px;
				height: 30px;
				background-color: gainsboro;
				white-space:nowrap;
				display: inline-block;
			    float: left;
			    position: relative;
			    
			    left: 25px;
			}
			#btn{
				margin: 75px auto;
				
				margin-left: 75px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<input id="btn" type="button" value="点击" onclick="backchange()"/>
		<script>
			var lis=document.getElementsByTagName('li');
			var i=0;
			function time(){
				
				lis[i].style.background='deepskyblue';
				i++;
			}
			function backchange() {
				window.setInterval(time,100);
			}
		</script>
	</body>
</html>
